<template>
  <Detail-dialog
    append-to-body
    v-if="visibleDialog"
    :title="title"
    :width="width"
    :top="top"
    :modal="showModal"
    :closeOnClickModal="false"
    :show.sync="visibleDialog"
    @close="close"
    @save="updateCustomer('customerForm')"
  >
    <div class="wp-body__box">
      <el-form
        ref="customerForm"
        :model="customerInfo"
        label-position="right"
        label-width="120px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input
                v-model.trim="customerInfo.customerName"
                class="wp-form-280"
                placeholder="客户名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源渠道" prop="channel">
              <el-select
                v-model.trim="customerInfo.channel"
                class="wp-form-280"
                placeholder="来源渠道"
                clearable
              >
                <el-option
                  v-for="item in customerChannels"
                  :label="item.bizName"
                  :value="item.bizValue"
                  :key="item.bizValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户级别" prop="level">
              <el-select
                v-model="customerInfo.level"
                class="wp-form-280"
                placeholder="客户级别"
                clearable>
                <el-option
                  v-for="item in customerLevels"
                  :label="item.value + '(' + item.label + ')'"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="负责人" prop="chargePerson">
              <Employee-seach v-if="lazy" :employeeCode.sync="customerInfo.chargePerson" :employeeName.sync="customerInfo.chargePersonName"/>
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input
                v-model.trim="customerInfo.mobile"
                class="wp-form-280"
                placeholder="手机号码"
                 maxlength="11"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话号码" prop="telephone">
              <el-input
                v-model.trim="customerInfo.telephone"
                class="wp-form-280"
                placeholder="电话号码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="传真号码" prop="fax">
              <el-input class="wp-form-280" v-model="customerInfo.fax" placeholder="传真号码" clearable></el-input>
            </el-form-item>
          </el-col>
         <el-col :span="12">
            <el-form-item label="客户邮箱" prop="email">
              <el-input
                v-model.trim="customerInfo.email"
                class="wp-form-280"
                placeholder="客户邮箱"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="省/市/区">
            <Region-cascader
            v-if="lazy"
            customClass="wp-form-280"
            :province.sync="customerInfo.province"
            :provinceCode.sync="customerInfo.provinceCode"
            :city.sync="customerInfo.city"
            :cityCode.sync="customerInfo.cityCode"
            :area.sync="customerInfo.area"
            :areaCode.sync="customerInfo.areaCode"/>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input
                class="wp-form-280"
                v-model.trim="customerInfo.address"
                placeholder="详细地址"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                class="wp-form-280"
                v-model.trim="customerInfo.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </Detail-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import RegionCascader from '@/components/RegionCascader'
import DetailDialog from '@/components/DetailDialog'
import Mixins from '../mixins'
export default {
  props: {
    title: String,
    width: {
      type: Number,
      default: 70
    },
    top: {
      type: Number,
      default: 2
    },
    show: {
      type: Boolean,
      default: false
    },
    showModal: {
      type: Boolean,
      default: true
    },
    customerCode: String
  },
  components: {EmployeeSeach, DetailDialog, RegionCascader},
  mixins: [Mixins],
  watch: {
    visibleDialog (nVal) {
      this.$emit('update:show', nVal)
    }
  },
  created () {
    this.customerChannels = this.$parent.$parent.$parent.$data.customerChannels
    this.getCustomerInfo(this.customerCode)
  },
  data () {
    return {
      visibleDialog: this.show,
      customerInfo: {},
      lazy: false,
      rules: {
        customerName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        mobilephone: [{ required: true, message: '不能为空', trigger: 'blur' }],
        level: [{ required: true, message: '不能为空', trigger: 'blur' }],
        channel: [{ required: true, message: '不能为空', trigger: 'blur' }],
        chargePerson: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['customerLevels'])
  },
  methods: {
    close () {
      this.visibleDialog = false
    },
    getCustomerInfo   (customerCode) {
      this.requestOption('customerGet', customerCode, (res) => {
        this.customerInfo = res.data || {}
        this.customerInfoData = res.data || {}
        this.lazy = true
      })
    },
    updateCustomer (tabForm) {
      const f = this.checkFormData(tabForm)
      if (f) {
        const updateData = {...this.customerInfo}
        delete updateData.createTime
        delete updateData.updateTime
        delete updateData.creator
        this.requestOption('customerUpdate', updateData, (res) => {
          if (res.code === 0) {
          // 更新详情窗口数据
            this.$parent.$parent.getCustomerInfo(updateData.customerCode)
            // 更新列表页面数据
            this.$parent.$parent.$parent.initPageList()
            // 关闭当前窗口
            this.close()
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-body__box {
  position: relative;
  overflow: auto;
  padding: 10px;
  .wp-form-280 {
    width: 280px;
  }
}

.wp-footer__box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
